html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
  margin:0;
  padding:0;
  border:0;
  font:inherit;
  font-size:100%;
  vertical-align:baseline;
}
html {overflow-y:scroll}
article,aside,figure,figcaption,footer,header,hgroup,menu,nav,section {display:block}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}
*:focus {outline:none}
time,mark {display:inline}


strong,b,dt,th,kbd {font-weight:bold}
em,i,dfn,caption,figcaption {font-style:italic}
ins,u {text-decoration:underline}
del {text-decoration:line-through}
mark,.highlight {
  background-color:#FAD163;
  color:black;
}
kbd {
  font-size:86%;
  line-height:100%;
  padding:2px 5px 1px;
  background-color:#eee;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
}
h1,h2,h3,h4,h5,h6 {
  font-weight:bold;
  line-height:normal;
  letter-spacing:-1px;
  margin:-40px 0 .5em;
  padding-top:60px;
}
h1 {font-size:160%}
h2 {font-size:140%}
h3 {font-size:130%}
h4 {font-size:115%}
h5,h6 {font-size:110%}
p,ul,ol,dl,table,form,figure,blockquote,pre,hr,iframe,.center,.button-group,.update,.block,.tip,.alert,.instruction,.catatan,.jsfiddle-demo,.reference-link,.template {margin-bottom:1.7em}
hr {margin-top:1.7em}
p:last-child,p:only-child {margin-bottom:0}
ul,ol {margin-left:2em}
li,dd {margin:0 0 .4em}
ul ul,ol ol,ul ol,ol ul {
  margin-top:.4em;
  margin-bottom:0;
  margin-left:1.2em;
}
ul {list-style:disc outside}
ol {list-style:decimal outside}
table {border-collapse:collapse;border-spacing:0}
table caption {text-align:left}

/* Safe CSS => Move from <br> tag to <p> tag without destroying my older posts layout */
.safe p+br,.safe ul+br,.safe ol+br,.safe .center+br,.safe .button-group+br,.safe .block+br,.safe .tip+br,.safe .instruction+br,.safe .catatan+br,.safe .alert+br,.safe blockquote+br,.safe pre+br,.safe figure+br,.safe form+br,.safe iframe+br,.safe table+br {display:none}
/* End */

a {
  color:#225588;
  text-decoration:none;
}
a:hover,a:focus {
  color:#5687b8;
  text-decoration:underline;
}
a img {border-width:0}
hr {
  height:0;
  border:none;
  background:none;
  border-bottom:1px dotted #bbb;
}
code {
  color:#888;
  font-family:"Courier New",Courier,Monospace;
  font-size:.923076923077em;
}
code a,code a:hover,code a:focus {color:inherit}
code a:hover,code a:focus {background-color:#E6ECF5}
sup,sub {
  position:relative;
  top:-.4em;
  font-size:96%;
}
sub {top:.4em}
small {font-size:96%}
acronym,abbr {
  cursor:help;
  color:#777;
}
dfn[title],.dfn {cursor:help}
figure {
  text-align:center;
  background-color:#CFDBEC;
  border:1px solid #a5a5a5;
  padding:10px;
}
figure figcaption {
  margin:10px 0 0;
  font-size:86%;
}
blockquote,b[rel="quote"] {
  display:block;
  font:inherit;
  position:relative;
  background-color:#5D73B5;
  color:white;
  text-shadow:0 1px 0 rgba(0,0,0,.2);
  padding:1.3em 1.6em;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}
blockquote:before,b[rel="quote"]:before {
  content:"";
  width:0;
  height:0;
  border:7px solid transparent;
  border-bottom-color:#5D73B5;
  position:absolute;
  top:-14px;
  right:15px;
}
blockquote a,blockquote a:hover,blockquote a:focus,blockquote code,b[rel="quote"] a,b[rel="quote"] a:hover,b[rel="quote"] a:focus {
  color:#FFEAE5 !important;
  background:none;
  text-shadow:none;
}

/* Forms */
form {font-size:86%}
fieldset {
  border:1px dotted #bbb;
  padding:10px;
  margin:0 0 5px;
}
legend {
  padding:0 1em;
  font-weight:bold;
}
input,button,select,textarea,.button {
  display:inline-block;
  *display:inline;
  width:170px;
  height:auto;
  margin:0 0 5px;
  padding:5px 4px 4px;
  border:1px solid #bbb;
  outline:none;
  background-color:#fafafa;
  font:inherit;
  font-size:100%;
  color:inherit;
  line-height:normal;
  vertical-align:baseline;
  -webkit-box-sizing:content-box;
  -moz-box-sizing:content-box;
  box-sizing:content-box;
  -webkit-background-clip:padding-box;
  -moz-background-clip:padding-box;
  background-clip:padding-box;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1);
  -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.1);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.1);
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}
input::-moz-focus-inner,button::-moz-focus-inner {
  margin:0;
  padding:0;
  border:none;
  outline:none;
}
select {
  padding-top:4px;
  cursor:pointer;
  background-color:white;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}
textarea {
  display:block;
  width:auto;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
input:focus,textarea:focus {
  border-color:#907C50;
  background-color:#FFE4B5;
}
input[disabled],button[disabled],select[disabled],textarea[disabled],
input[readonly],textarea[readonly],input[readonly]:focus,textarea[readonly]:focus {
  cursor:default;
  cursor:not-allowed;
  background-color:#eee;
  border-color:#bbb;
  color:#555;
}
input[readonly],textarea[readonly],input[readonly]:focus,textarea[readonly]:focus {cursor:default}
  width:auto;
  cursor:pointer;
  background-color:#248AB0;
  background-image:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.26));
  background-image:-moz-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.26));
  background-image:-ms-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.26));
  background-image:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.26));
  background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.26));
  border-width:2px;
  border-color:white;
  position:relative;
  top:-3px;
  color:#ebebeb;
  font-weight:bold;
  font-size:86%;
  line-height:normal;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
  padding:.5em .9em .4em;
  white-space:nowrap;
}
.button.small,.button.small:active,.button.small:focus {
  font-size:10px;
  border:none;
  padding:.45em .9em;
}
.button.small.square-btn,.button.small.square-btn:active,.button.small.square-btn:focus {
  font-weight:normal;
  text-transform:uppercase;
  border:4px solid #333;
  padding:.4em .8em .5em;
  margin:2px 0 0 2px;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
}

input[type="radio"],input[type="checkbox"],input[type="image"],label {
  cursor:pointer;
  width:auto;
  margin:0;
  padding:0;
  background:none;
  border:none;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
}
input[type="radio"],input[type="checkbox"] {
  position:relative;
  top:1px;
}

/* Tables */
table {table-layout:fixed}
table[border="1"] th,table[border="1"] td {
  border:1px solid #bbb;
  padding:.5em .7em;
}
table th,table td {
  vertical-align:top;
  word-wrap:break-word;
}
table caption {
  font-size:96%;
  color:#999;
}
table[border="1"] th {
  background-color:#fafafa;
  text-align:left;
}
table[border="1"] caption {padding:.5em .7em}
table.config {background-color:#FFF0A0}
table.config td,table.config th {border-color:#333}
table.config th {
  background-color:#333;
  color:white;
}
table tr:target td {background-color:#DCE2F3}
table.reference {font-size:86%}

/* Blocks */
.catatan {
  background-color:#FFFAC1;
  padding:1.8em 2em;
  margin-left:2%;
  margin-right:2%;
  font-family:Georgia,"URW Bookman L",Serif;
  font-style:italic;
  line-height:1.42;
  color:#222;
  position:relative;
  text-shadow:none;
}
.catatan:before {
  content:"";
  display:block;
  width:100%;
  height:4px;
  background-color:#4b8db5;
  background-image:-webkit-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);
  background-image:-moz-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);
  background-image:-ms-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);
  background-image:-o-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);
  background-image:linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);
  position:absolute;
  top:0;
  left:0;
}
.catatan code {font-style:normal}
.catatan.resource {
  margin-left:0;
  margin-right:0;
  font-family:Tahoma,Verdana,Arial,Sans-Serif;
  font-style:normal;
  padding:1.5em;
  background-color:#eee;
}
.catatan.resource img,.catatan.resource a img {
  border:2px solid #aaa;
  padding:0;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}
.update {
  color:#A73B3B;
  margin-left:1em;
  margin-right:1em;
  border-top:1px solid;
  border-bottom:1px solid;
  padding:.8em 0 1em;
}
.alert,.instruction,.tip {
  background-color:#FFBABA;
  -webkit-background-clip:padding-box;
  -moz-background-clip:padding-box;
  background-clip:padding-box;
  color:#D8000C;
  border:1px solid;
  border-bottom-color:#BF030D;
  padding:.6em 1em;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  text-shadow:0 1px 0 rgba(255,255,255,.2);
  -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 1px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 1px rgba(0,0,0,.2);
}
.instruction {
  background-color:#DFF2BF;
  color:#4F8A10;
  border-bottom-color:#40710A;
}
.tip {
  background-color:#BEDBF4;
  background-image:-webkit-linear-gradient(#BEDBF4,#70B3DC);
  background-image:-moz-linear-gradient(#BEDBF4,#70B3DC);
  background-image:-ms-linear-gradient(#BEDBF4,#70B3DC);
  background-image:-o-linear-gradient(#BEDBF4,#70B3DC);
  background-image:linear-gradient(#BEDBF4,#70B3DC);
  border:1px solid #5E96B7;
  border-bottom-color:#5688A7;
  color:#29526F;
}
.block {
  border:2px solid #888;
  background-color:#ccc;
  padding:6px 10px;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
}
.template {
  max-height:250px;
  overflow:auto;
  background-color:#fafafa;
  border:3px double #bbb;
  width:96%;
  -webkit-box-shadow:inset 0 0 5px #888;
  -moz-box-shadow:inset 0 0 5px #888;
  box-shadow:inset 0 0 5px #888;
  padding:4px;
  font-size:86%;
}
.template table,.template td {
  border:none;
  margin:0;
}
.template table h4 {
  text-transform:uppercase;
  font-weight:700;
  margin:0 0 5px;
  padding:0;
  letter-spacing:0;
}
.template table h4 a,.template table h4 a:visited {
  display:block;
  color:#247C83;
  padding:7px 10px 4px;
  background-image:-webkit-linear-gradient(left,rgba(0,0,0,.1),rgba(0,0,0,0));
  background-image:-moz-linear-gradient(left,rgba(0,0,0,.1),rgba(0,0,0,0));
  background-image:-ms-linear-gradient(left,rgba(0,0,0,.1),rgba(0,0,0,0));
  background-image:-o-linear-gradient(left,rgba(0,0,0,.1),rgba(0,0,0,0));
  background-image:linear-gradient(left,rgba(0,0,0,.1),rgba(0,0,0,0));
}
.template td {padding:10px}
.template img {
  border:1px solid #ccc;
  background-color:white;
  padding:1px;
  max-width:none;
}
.reference-link p:only-child {text-align:right}

/* Outer */
#out-shadow {
  position:relative;
  text-align:left;
  margin:23px auto 40px;
  width:1250px;
  background-color:#ccc;
  -webkit-box-shadow:0 0 2px rgba(0,0,0,.4),0 0 9px rgba(0,0,0,.4);
  -moz-box-shadow:0 0 2px rgba(0,0,0,.4),0 0 9px rgba(0,0,0,.4);
  box-shadow:0 0 2px rgba(0,0,0,.4),0 0 9px rgba(0,0,0,.4);
  -webkit-border-radius:0 0 7px 7px;
  -moz-border-radius:0 0 7px 7px;
  border-radius:0 0 7px 7px;
}
#out-shadow:after {
  content:"";
  display:table;
  clear:both;
}
#alexa {
  width:250px;
  padding:10px;
  margin:0 auto 30px;
  text-align:center;
  background-color:#333;
  -webkit-box-shadow:inset 0 1px 5px black;
  -moz-box-shadow:inset 0 1px 5px black;
  box-shadow:inset 0 1px 5px black;
  border:2px solid #ccc;
}

/* Main Column */
#main-wrapper {
  
  float:left;
  margin:0 0 0 1%;
  padding:10px 0;
  background-color:white;
  background-image:-webkit-linear-gradient(#dedede,white 100px);
  background-image:-moz-linear-gradient(#dedede,white 100px);
  background-image:-ms-linear-gradient(#dedede,white 100px);
  background-image:-o-linear-gradient(#dedede,white 100px);
  background-image:linear-gradient(#dedede,white 100px);
  border:2px solid #888;
  overflow:hidden;
  word-wrap:break-word;
}
.index #main-wrapper {
  background-color:#333;
  background-image:none;
  border-color:#ebebeb;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
.custom-status-message {
  margin:0;
  padding:1em 1.5em;
  font-size:96%;
  font-style:italic;
}
.index .custom-status-message {
  color:#999;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
}
.index .custom-status-message a {color:#5687b8}

/* Sidebar */
.sidebar ul {
  list-style:none;
  border-top:1px solid #222;
  border-bottom:1px solid #444;
  margin:0 0 1.25em;
  padding:0;
}
.sidebar ul li {
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  margin:0;
  padding:3px 10px;
}
.sidebar p {margin:0 0 .6em}
.sidebar a {
  color:#999;
  text-decoration:none;
  text-shadow:0 1px 0 black;
}
.sidebar a:visited {color:#666}
.sidebar a:hover,.sidebar a:visited:hover,.sidebar a:focus,.sidebar a:visited:focus {
  color:white;
  text-decoration:none;
}
#sidebar-wrapper {
  
  float:right;
  margin:0 1% 10px 0;
  padding:0;
  background-color:#333;
  border:4px solid #ddd;
  font-size:90%;
  color:#666;
  position:relative;
  right:-2px;
  -webkit-box-shadow:inset 0 0 5px black;
  -moz-box-shadow:inset 0 0 5px black;
  box-shadow:inset 0 0 5px black;
  overflow:hidden;
  word-wrap:break-word;
}
#sidebar-wrapper .widget {margin:0}
#sidebar-wrapper .widget-content {
  margin:0;
  padding:10px;
}
#sidebar-wrapper h2 {
  cursor:pointer;
  margin:0;
  padding:0 .8em;
  background-color:#333;
  background-image:-webkit-linear-gradient(#333,#3c3c3c);
  background-image:-moz-linear-gradient(#333,#3c3c3c);
  background-image:-ms-linear-gradient(#333,#3c3c3c);
  background-image:-o-linear-gradient(#333,#3c3c3c);
  background-image:linear-gradient(#333,#3c3c3c);
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  font-weight:bold;
  font-size:100%;
  line-height:30px;
  color:#bbb;
  text-shadow:0 1px 0 black;
  text-transform:uppercase;
  height:28px;
}
#sidebar-wrapper h2.active,.no-js #sidebar-wrapper h2 {
  background-image:-webkit-linear-gradient(#3c3c3c,#333);
  background-image:-moz-linear-gradient(#3c3c3c,#333);
  background-image:-ms-linear-gradient(#3c3c3c,#333);
  background-image:-o-linear-gradient(#3c3c3c,#333);
  background-image:linear-gradient(#3c3c3c,#333);
  -webkit-box-shadow:0 1px 3px black;
  -moz-box-shadow:0 1px 3px black;
  box-shadow:0 1px 3px black;
  border-color:#555 transparent #222;
}
/* Loading Message Holder */
#loading-text {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  left:0;
  z-index:9999;
  text-align:center;
}
#loading-text span {
  display:inline;
  background-color:#900;
  padding:5px 10px 7px;
  font:normal bold 11px/24px Arial,Sans-Serif;
  color:white;
}
#loading-text .notif-count {
  display:block;
  position:absolute;
  top:0;
  left:50%;
  width:66px;
  height:17px;
  background-color:#900;
  padding:1px 0 0;
  font:normal bold 8px/15px Tahoma,Verdana,Arial,Sans-Serif;
  color:white;
  text-decoration:none;
  text-align:center;
  text-transform:uppercase;
  margin:3px auto 0 -33px;
  overflow:hidden;
}

/* Dialog Box */
#alert-box {
  position:fixed !important;
  position:absolute;
  top:50px;
  right:0;
  left:0;
  z-index:9999;
  text-align:center;
}
#alert-box .message {
  text-align:left;
  color:white;
  width:370px;
  margin:0 auto;
  padding:1.2em 1.4em;
  background-color:#174A87;
  border:10px solid #0A2E58;
  -webkit-background-clip:padding-box;
  -moz-background-clip:padding-box;
  background-clip:padding-box;
  -webkit-box-shadow:0 0 2px 1px black,0 0 10px black;
  -moz-box-shadow:0 0 2px 1px black,0 0 10px black;
  box-shadow:0 0 2px 1px black,0 0 10px black;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#alert-box .button-group {margin:1.7em 0 0}
#alert-box button {
  border:none;
  margin:0 2px;
}

/* Demo Frame */
.jsfiddle-demo {
  display:block;
  width:99%;
  height:300px;
  /* border:2px solid #4474A5; */
  border:2px solid #bbb;
}

.copyright-message {
  background-color:#111111;
  bottom:0;
  color:#990000;
  display:none;
  font:50px/54px Arial,Sans-Serif;
  left:0;
  letter-spacing:-2px;
  padding:120px 50px;
  position:fixed !important;
  right:0;
  text-align:center;
  text-transform:none;
  top:0;
  white-space:pre-wrap;
  word-wrap:break-word;
  z-index:9999;
}

#site-footer a:hover .copyright-message,
#site-footer a:focus .copyright-message {
  display:block;
}

img {
  height:auto !important;
  max-width:98%;
}

/* Loading... */
h1,h2,h3,h4,h5,h6,#sidebar-wrapper,#main-wrapper,#top-ribbon,#ad-wrapper {
  -webkit-animation:init 1s;
  -moz-animation:init 1s;
  -ms-animation:init 1s;
  -o-animation:init 1s;
  animation:init 1s;
}
#top-ribbon,#ad-wrapper {
  -webkit-animation-duration:2s;
  -moz-animation-duration:2s;
  -ms-animation-duration:2s;
  -o-animation-duration:2s;
  -animation-duration:2s;
}

/* Loading Overlay */
#page-loader {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#222;
  z-index:9999;
  text-align:center;
  padding:70px 0 0;
  display:none;
}

/* 'Top' Link */
#gotop {
  cursor:pointer;
  width:30px;
  height:30px;
  position:fixed !important;
  position:absolute;
  bottom:-40px;
  right:-40px;
  z-index:999;
  text-indent:-9999px;
  border:1px solid #144F69;
  background-color:#067BAF;
  background-image:-webkit-radial-gradient(ellipse at center top,#2493C4,#086A95);
  background-image:-moz-radial-gradient(ellipse at center top,#2493C4,#086A95);
  background-image:-ms-radial-gradient(ellipse at center top,#2493C4,#086A95);
  background-image:-o-radial-gradient(ellipse at center top,#2493C4,#086A95);
  background-image:radial-gradient(ellipse at center top,#2493C4,#086A95);
  -webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  -moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  -webkit-border-radius:10px 0 0 0;
  -moz-border-radius:10px 0 0 0;
  border-radius:10px 0 0 0;
  overflow:hidden;
}
#gotop:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border-width:10px 4px;
  border-style:solid;
  border-color:transparent transparent #C3D1D7 transparent;
  position:absolute;
  top:0;
  left:11px;
}
#gotop:focus {outline:none}
#gotop:hover:after {border-bottom-color:white}
#gotop:active {
  background-image:-webkit-linear-gradient(#144F69,#2493C4);
  background-image:-moz-linear-gradient(#144F69,#2493C4);
  background-image:-ms-linear-gradient(#144F69,#2493C4);
  background-image:-o-linear-gradient(#144F69,#2493C4);
  background-image:linear-gradient(#144F69,#2493C4);
}

/* Main Classes */
.loader {background:transparent url('') no-repeat 50% 120px}
.benar,.true {background-color:#EDFFCE}
.salah,.false {background-color:#FFDED8}
.float-left {float:left}
.float-right {float:right}
.clear {display:block;clear:both}
.text-center {text-align:center}
.text-left {text-align:left}
.text-right {text-align:right}
.alignleft,.align-left {float:left;margin:4px 2em .7em 0}
.alignright,.align-right {float:right;margin:4px 0 2em .7em}
.center {margin-left:auto;margin-right:auto;display:block;text-align:center}
.full {width:96.8%;max-width:96.8%;margin-left:auto;margin-right:auto}
.underline {border-bottom:1px dashed}
.hidden {display:none}
.accessible-hidden,.screen-reader {position:absolute!important;overflow:hidden;clip:rect(0px 0px 0px 0px);clip:rect(0px,0px,0px,0px);height:1px;width:1px;margin:-1px 0 0;padding:0;border:0}
.ir {font:normal normal 0/0 a;color:transparent;text-shadow:none}

/* Other... */
.rm-button-wrap {
  position:absolute;
  bottom:10px;
  right:10px;
  left:0;
  margin-left:100px;
}
.target-elem:before { /* Jump-Link class name */
  content:"";
  display:block;
  height:40px;
  margin-top:-40px;
}
a.subscribe,a.subscribe:hover,a.subscribe:focus {
  font-size:80%;
  color:#eee;
  background-color:#527915;
  text-transform:uppercase;
  position:relative;
  top:-3px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  margin:0 7px;
  padding:3px 10px;
  text-decoration:none;
}
a.subscribe:hover,a.subscribe:focus {background-color:#4B6F15}
a.subscribe:active {
  background-color:#999;
  color:white;
}
.color-box {
  display:inline-block;
  width:30px;
  height:30px;
  background-color:white;
  border:2px solid #222;
  border-color:rgba(0,0,0,.2);
  font:normal normal 0/0 a;
  color:transparent;
  text-shadow:none;
}
.color-box:hover,.color-box:focus {
  border-color:#333;
  border-color:rgba(0,0,0,.4);
}

/* Above post */
.date-header {
  display:block;
  font-family:Alike,Georgia,"URW Bookman L",Serif;
  text-align:right;
  font-size:110%;margin:0 0 10px;padding:0 0 10px;
}
.reaction-button {
  display:block;
  width:100%;
  height:22px;
  position:absolute;
  top:-2px;
  right:0;
  left:-12px;
}

/* Posts */
.index .post-outer {
  float:left;
  width:50%;
}
.post {
  border-top:1px dotted #bbb;
  border-bottom:1px dotted #bbb;
  margin:.3em 0 25px;
  padding:0 13px;
}
.index .post {
  margin:0;
  padding:0;
  border:none;
  color:#999;
  -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}
.post-title {
  letter-spacing:0;
  border:1px dotted #bbb;
  border-top-width:0;
  font:normal normal 146%/1.6 Alike,Georgia,"URW Bookman L",Serif;
  padding:3px 14px 5px;
  margin:0;
  -webkit-transition:all 0.26s ease-out;
  -moz-transition:all 0.26s ease-out;
  -ms-transition:all 0.26s ease-out;
  -o-transition:all 0.26s ease-out;
  transition:all 0.26s ease-out;
}
.index .post-title {
  border:0 solid;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  padding:0 15px;
  font:normal normal 14px/36px Alike,Georgia,"URW Bookman L",Serif;
  height:36px;
  overflow:hidden;
  text-transform:uppercase;
  text-shadow:0 -1px 0 #111;
}
.post-title a,.post-title a:hover {
  text-decoration:none;
  color:inherit;
}
.post-title a:focus {outline:1px dotted}
.index .post-title:hover {border-left:4px solid #066696}
.post a img {
  padding:4px;
  background-color:#eee;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}
.index .post-thumbnail {
  width:72px;
  height:72px;
  background-color:#222;
  float:left;
  margin-right:10px;
  overflow:hidden;
}
.post-body {
  border:1px dotted #bbb;
  border-width:0 1px;
  padding:1px 5px;
}
.index .post-body {
  margin:0;
  border:none;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  height:130px;
  font-size:96%;
  text-align:right;
  position:relative;
}
.index .post-snippet {
  position:relative;
  word-wrap:break-word;
  overflow:hidden;
}
.index .post-snippet:before{content:attr(data-snip)}

/* Archive Page */
.archive #main-wrapper {margin-bottom:15px}
.archive .blog-posts {margin-top:15px}
.archive .post {
  margin:0;
  border:none;
}
.archive .post-body,.archive .post-footer {display:none}
.archive .post-title {
  border:none;
  font:inherit;
  margin:2px 0 0;
  padding:0;
}
.archive .post-title a {
  display:block;
  background-color:#248AB0;
  color:white;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
  padding:5px 10px;
}
.archive .post-title a:hover,.archive .post-title a:focus {background-color:#0671A1}
.archive .post-title a:active {background-color:#005E90}
/* End Archive Page */

.post-body figure img {
  border:none;
  background:none;
  padding:0;
  -webkit-box-shadow:0 0 3px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 3px rgba(0,0,0,.7);
  box-shadow:0 0 3px rgba(0,0,0,.7);
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
  display:block;
  margin:0 auto;
}
.post-body section {
  padding-top:30px;
  margin-top:-30px;
}
.post-body section footer {clear:both}
.post-body .table-of-content,.post-body section .reference-breadcrumb {
  font-size:86%;
  padding:2px 5px;
  background-color:#f5f5f5;
}
.post-body .table-of-content {
  padding:10px 5px 5px;
  border:2px solid #eee;
}
.post-body .table-of-content ol,.post-body .table-of-content ul {margin-bottom:8px}
.post-body ul.listing {
  font-size:10px;
  text-transform:uppercase;
}
.post-body ul.listing li {margin-bottom:0}
.post-body ul.listing li.title {
  list-style:none;
  font-weight:bold;
  margin-left:-14px;
}
.post-body .ad-text {margin-bottom:30px}
.post-footer {
  background-color:#eee;
  border:1px dotted #bbb;
  border-bottom-width:0;
  font-size:80%;
  color:#666;
  text-transform:uppercase;
  font-weight:bold;
  padding:4px 14px;
}
.post-footer .span {margin-right:.3em}
.index .post-footer,img.icon-action{display:none}

/* Code Snippet Page */
.index .snippet-list {
  margin:0;
  border-bottom:1px solid #444;
}
.index .snippet-list li {
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
}
.index .snippet-list a {
  display:block;
  padding:.7em 1.2em;
  font-size:130%;
  font-family:Alike,Georgia,"URW Bookman L",Serif;
  text-decoration:none;
  text-shadow:0 -1px 0 #222;
  color:#4A8DBD;
  overflow:hidden;
}
.index .snippet-list a:active,.index .snippet-list a.active {color:white}
.index .snippet-list .label-name {
  background-color:#999;
  text-shadow:none;
  color:white;
  font-size:10px;
  font-weight:normal;
  font-family:Ubuntu,Trebuchet,"Trebuchet MS",Arial,Sans-Serif;
  text-transform:uppercase;
  padding:4px 7px;
  display:block;
  float:right;
  margin-left:4px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}
.index .snippet-list .label-name.css {background-color:#5DA028}
.index .snippet-list .label-name.javascript {background-color:#888}
.index .snippet-list .label-name.jquery {background-color:#7073CF}
.index .snippet-list .label-name.xml {background-color:#C44032}
.index .snippet-list .label-name.html {background-color:#4584BE}

/* Related Posts */
#related-posts {margin:.7em 3% 1em}
#related-posts h2 {
  margin:0 .3em .7em;
  padding:0;
}
#related-posts-border {
  color:#999;
  background-color:#333;
  -webkit-box-shadow:inset 0 0 7px black;
  -moz-box-shadow:inset 0 0 7px black;
  box-shadow:inset 0 0 7px black;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  padding:7px;
}
.related-posts-container {
  border:1px solid #3c3c3c;
  -webkit-box-shadow:inset 0 0 3px black;
  -moz-box-shadow:inset 0 0 3px black;
  box-shadow:inset 0 0 3px black;
  height:370px;
  overflow:auto;
  padding:1.8em;
}
.related-posts-container a {color:#5687b8}
.related-posts-container a:hover,.related-posts-container a:focus {text-decoration:underline}
.sidebar .related-posts-container ul {margin:.7em 0 2em}

/* Sidebar and Advertisement */
.sidebar {line-height:1.4}
#about h2,.sidebar h2,.sidebar-box h2 {letter-spacing:0}
#ad-wrapper,.sidebar-box {
  width:29%;
  float:right;
  display:inline;
  color:#999;
  background-color:#333;
  -webkit-box-shadow:inset 0 0 2px black;
  -moz-box-shadow:inset 0 0 2px black;
  box-shadow:inset 0 0 2px black;
  margin:0 1.05% 1em 0;
}
.sidebar-box {
  width:35%;
  min-height:100px;
  margin:0 1% 10px 0;
  border:2px solid #999;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}
.sidebar-box h2 {
  background-color:#333;
  font-size:86%;
  font-weight:bold;
  line-height:26px;
  text-transform:uppercase;
  text-align:center;
  position:relative;
  z-index:4;
  color:#aaa;
  padding:2px 0 0;
  margin:0;
  border-bottom:1px solid #222;
  -webkit-box-shadow:0 1px 0 #444;
  -moz-box-shadow:0 1px 0 #444;
  box-shadow:0 1px 0 #444;
}
#quote-frame iframe,.sidebar-box iframe {
  display:block;
  overflow:hidden;
}
#updated-posts-container {height:420px}
#ads {
  text-align:center;
  border:1px solid #3c3c3c;
  -webkit-box-shadow:inset 0 0 3px black;
  -moz-box-shadow:inset 0 0 3px black;
  box-shadow:inset 0 0 3px black;
  margin:7px;
  padding:1.4em 1em 1em;
}
#ads a img {
  width:125px;
  height:125px;
  border:none;
  background:none;
  -webkit-box-shadow:0 0 2px black;
  -moz-box-shadow:0 0 2px black;
  box-shadow:0 0 2px black;
  padding:4px;
}
#ads a:hover img,#ads a:focus img {background-color:#6788E8}
#ad-2 {
  text-align:center;
  padding:0 0 20px;
}
#ad-2 iframe {margin:10px auto}
.paypal-donate {margin:2em 0 0}
.paypal-donate form {margin:0}
#ad-banner-wrapper {
  text-align:left;
  margin:0 0 0 1.8%;
}
img.ad-banner {
  border:4px solid #2c2c2c;
  width:88%;
  margin:0 0 2px;
}
#ad-banner-wrapper a:focus img.ad-banner {border-color:#ff0}
.index .ad-banner-5 {
  padding:.5em 1em;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  text-align:left;
  line-height:0;
}
#ad-bottom {
  width:auto;
  margin:200px 0 0;
  overflow:hidden;
}
#ad-bottom img {
  width:125px;
  height:125px;
  border:2px solid #666;
  float:left;
  margin:0 1em 0 0;
}
#ad-bottom strong {
  display:block;
  margin-bottom:5px;
}
#ad-bottom .container {
  border-top:5px solid #0186CB;
  background-color:#eee;
  width:44.8%;
  overflow:hidden;
  padding:2% 2% 1018px 2%;
  margin:0 0 -1000px 0;
}
#ad-bottom .container:hover img {border-color:#FF5DC2}
.inline-ad {
  margin:-10px 14px 10px;
  background-color:#eee;
  border-top:4px solid #0186CB;
  padding:10px;
  position:relative;
  text-align:left;
  clear:both;
}
.inline-ad .snippet-outer {
  width:auto;
  margin-left:315px;
}
.inline-ad .snippet-outer ul {
  margin:7px 0 0;
  padding:0;
}
.inline-ad .snippet-outer li {
  list-style:none;
  margin:0 0 2px;
  background-color:#e5e5e5;
  padding:0 7px 0 7px;
  line-height:24px;
  height:24px;
  overflow:hidden;
  border-bottom:1px dotted #ccc;
}

/* Search Form and Subscribe Form */
#cse-search-box,
#subscribe-form form {font:inherit}
#cse-search-box {
  position:absolute;
  top:15px;
  right:17px;
  z-index:10;
  vertical-align:top;
  text-align:right;
  width:165px;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}
#cse-search-box input.search-field,
#subscribe-form input {
  background-color:#444;
  width:145px;
  padding:1px;
  -webkit-box-shadow:inset 0 0 2px #333;
  -moz-box-shadow:inset 0 0 2px #333;
  box-shadow:inset 0 0 2px #333;
  border:1px solid;
  border-color:#222 #444 #444 #222;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
}
#cse-search-box input.search-field:focus {
  width:160px;
  color:white;
  background-color:#F3A01E;
  -webkit-box-shadow:0 0 2px white,0 0 30px white;
  -moz-box-shadow:0 0 2px white,0 0 30px white;
  box-shadow:0 0 2px white,0 0 30px white;
  border-color:white;
}
#subscribe-form {
  width:210px;
  padding:0 0 7px;
  background-color:#5D73B5;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  position:absolute;
  top:10px;
  left:10px;
  display:none;
}
#subscribe-form input.email-input {
  width:173px;
  margin:10px 0 7px 10px;
  padding:7px;
  font-size:86%;
}
#subscribe-form input.email-submit {
  width:auto;
  margin:0 0 0 10px;
  padding:4px 8px;
  border:none;
  text-shadow:none;
  background-color:#405289;
  background-image:none;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}
#subscribe-form input.email-submit:hover,#subscribe-form input.email-submit:focus {
  background-color:#2E3E6A;
  background-image:none;
}
a.close-form,a.close-form:hover,a.close-form:focus {
  float:right;
  margin:0 8px 1px 0;
  color:white;
  font-family:Tahoma,Verdana,Arial,Sans-Serif;
  font-size:110%;
  line-height:100%;
  text-decoration:none;
}
a.close-form:hover,a.close-form:focus {color:#ccc}

/* Widgets */
#HTML2 .widget-content {text-align:center}
#HTML2 img {
  display:inline;
  background-color:black;
  padding:4px;
  border:none;
  opacity:.7;
}
#HTML2 img:hover {opacity:1}
.widget.PopularPosts .widget-content {
  font-size:96%;
  line-height:normal;
}
.widget.PopularPosts li {padding:.5em 0 .8em}
.widget.PopularPosts .item-title a {
  display:block;
  font-weight:bold;
  margin:0 0 .2em;
}
.widget.PopularPosts img {
  padding:0;
  margin:5px 10px 0 0;
  border:none;
  background-color:#111;
  float:left;
}
.widget.PopularPosts a.more-link,.widget.PopularPosts a.more-link:hover,.widget.PopularPosts a.more-link:focus {
  display:block;
  float:right;
  color:#333;
  background-color:#999;
  line-height:100%;
  margin:1em 0 0;
  padding:2px 6px 4px 5px;
  font-size:10px;
  font-style:italic;
  text-decoration:none;
  text-shadow:none;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
}
.widget.PopularPosts a.more-link:hover,.widget.PopularPosts a.more-link:focus {background-color:white}
.widget.BlogArchive {text-align:left}
.widget.BlogArchive ul,
.widget.BlogArchive li,
.widget.BlogArchive ul ul,
.widget.BlogArchive li li {
  font-weight:bold;
  margin:0;
  padding:0;
  border:none;
  list-style:none;
}
.widget.BlogArchive a.post-count-link,.widget.BlogArchive a.post-count-link:link,.widget.BlogArchive a.post-count-link:visited,.widget.BlogArchive a.toggle,.widget.BlogArchive a.toggle:link,.widget.BlogArchive a.toggle:visited,.widget.BlogArchive a.toggle:hover {text-decoration:none}
.widget.BlogArchive .toggle {
  cursor:pointer;
  font-family:Arial,Sans-Serif;
  line-height:100%;
}
.widget.BlogArchive ul li {
  margin:2px 0;
  padding:.2em .2em 0;
  background-color:#232323;
}
.widget.BlogArchive li li {
  padding:0 0 0 1.4em;
  margin:0;
  font-size:96%;
  font-weight:normal;
}
.widget.BlogArchive ul ul:last-child {padding:0 0 .3em}
.widget.BlogArchive .collapsed ul {display:none}
.rpthumb {
  background-color:#333;
  margin:0;
  padding:0;
  font-size:86%;
  font-weight:bold;
  line-height:normal;
}
.rpthumb li {
  height:44px;
  list-style:none;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  display:block;
  padding:7px 7px;
  margin:0;
  overflow:hidden;
  background-color:#333;
  text-align:left;
}
.rpthumb li a {
  color:#999;
  display:block;
}
.rpthumb li a:hover,.rpthumb li a:focus {color:white}
.rpthumb img.rp-thumb {
  outline:none;
  border:2px solid black;
  background-color:#02406C;
  display:block;
  float:left;
  margin:0 10px 0 0;
  width:40px;
  height:40px;
}
.rpthumb span {
  font-size:96%;
  color:#666;
}
.frame-preloader iframe {
  border:none;
  width:100%;
}


/* Code Block */
pre,i[rel="pre"] {
  display:block;
  font:normal normal 12px/normal "Courier New",Courier,Monospace;
  color:#839496;
  padding:.5em .5em .5em 1em;
  background-color:#002b36;
  border-left:4px solid #268bd2;
  position:relative;
  overflow:auto;
  word-wrap:normal;
  white-space:pre;
}
pre code {
  display:block;
  font:inherit;
  color:inherit;
  letter-spacing:0;
  white-space:pre;
}
pre[rel="HTML"],pre[data-codetype="HTML"] {border-left-color:#4584BE}
pre[rel="CSS"],pre[data-codetype="CSS"] {border-left-color:#5DA028}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"] {border-left-color:#bbb}
pre[rel="JQuery"],pre[data-codetype="JQuery"] {border-left-color:#7073CF}
pre[rel="JQuery UI"],pre[data-codetype="JQuery UI"] {border-left-color:#E36B23}
pre[rel="XML"],pre[data-codetype="XML"] {border-left-color:#C44032}
pre[rel*="+"],pre[data-codetype*="+"] {border-left-color:#7C814D}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc {color:#586e75;font-style:italic}
pre .keyword,pre .css .rule .keyword,pre pre .winutils,pre .javascript .title,pre .method,pre .addition,pre .css .tag,pre .lisp .title {color:#859900}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor {color:#2aa198}
pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .builtin,pre .built_in,pre .lisp .title,pre .identifier,pre .title .keymethods,pre .id {color:#268bd2}
pre .tag .title,pre .rules .property,pre .django .tag .keyword {font-weight:bold}
pre .attribute,pre .variable,pre .instancevar,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .label {color:#b58900}
pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .diff .change,pre .special,pre .keymethods,pre .attr_selector,pre .important,pre .subst,pre .cdata {color:#cb4b16}
pre .deletion {color:#dc322f}
pre .tex .formula {background:#073642}
pre.numbered {
  border-left-width:2px;
  padding-left:1em;
}
pre .line-number,pre.numbered code {
  display:block;
  line-height:16px;
}
pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  color:#586E75;
  border-right:2px solid #05313B;
  text-align:right;
  min-width:35px;
}
pre .line-number span {
  display:block;
  position:relative;
  padding:0 .5em 0 1em;
}
pre .line-number span:nth-child(even) {background-color:#03242C}
pre .line-number span em {
  position:absolute;
  bottom:-1px;
  left:100%;
  background-color:orange;
  padding:0 2px 1px 2px;
  border:1px solid black;
  font-style:normal;
  color:black;
  display:none;
}
pre .line-number span:hover em {display:block}
pre .line-number span:target a {
  display:block;
  color:white;
  position:relative;
  background-color:#268bd2;
  margin:0 -.5em 0 -1em;
  padding:0 .5em 0 0;
}
pre.numbered code span {line-height:12px}
pre[data-codetype="HTML"] .line-number span:target a {background-color:#4584BE}
pre[data-codetype="CSS"] .line-number span:target a {background-color:#5DA028}
pre[data-codetype="JavaScript"] .line-number span:target a {background-color:#bbb}
pre[data-codetype="JQuery"] .line-number span:target a {background-color:#7073CF}
pre[data-codetype="JQuery UI"] .line-number span:target a {background-color:#E36B23}
pre[data-codetype="XML"] .line-number span:target a {background-color:#C44032}
pre[data-codetype*="+"] .line-number span:target a {background-color:#7C814D}
pre .line-number span:target:before {
  content:"";
  display:block;
  height:150px;
  margin-top:-150px;
  visibility:hidden;
}
.bright-code pre {
  background-color:white;
  color:#657b83;
  border:1px solid #E9E7E0;
}
.bright-code pre code {color:#657b83}
.bright-code pre .line-number {border-right-color:#6CE26C}
.bright-code pre .line-number span a {color:#bbb}
.bright-code pre .line-number span:nth-child(even) {background-color:#eee}
.bright-code pre .line-number span:target,pre .line-number span:target {background:none}
.bright-code pre .line-number span:target a {color:black}
.bright-code .comment,.bright-code .template_comment,.bright-code .diff .header,.bright-code .doctype,.bright-code .lisp .string,.bright-code .javadoc {color:#bbb}
pre .highlight,pre .highlight span,pre .highlight span[class],pre mark,pre mark span,pre mark span[class] {color:black}
pre code .branch-link,pre code .branch-link:hover {
  background-color:#052127;
  color:#839496;
  text-decoration:none;
  border:1px dotted;
  line-height:12px;
}

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:none;font-size:100%;font:inherit;vertical-align:baseline}
*:focus{outline:none}
section,nav,article,aside,hgroup,header,footer{display:block}
time,mark{display:inline}
strong,b,dt,th,kbd{font-weight:bold}
em,i,dfn,caption{font-style:italic}
ins,u{text-decoration:underline}
del{text-decoration:line-through}
body{font:normal normal 12px/1.4 Arial,Sans-Serif;color:black;text-align:center}
h1,h2,h3,h4,h5,h6{font-weight:bold}
h1{font-size:315%}
h2{font-size:270%}
h3{font-size:200%}
h4{font-size:180%}
h5{font-size:150%}
h6{font-size:120%}
a{color:blue;text-decoration:none}
a:hover{text-decoration:underline}
a img{border:0}
abbr,acronym{border-bottom:1px dotted}
small{font-size:96%}
sup,sub{position:relative;top:-.4em;font-size:96%}
sub{top:.4em}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}
blockquote{padding:0 0 0 20px;margin:0 10px;border-left:4px solid #eee}
p,ul,ol,dl,table,pre,blockquote,form,hr{margin:1.4em 0}
ul,ol,dd{margin-left:2em}
ul ul,ol ol,ul ol,ol ul{margin-top:0;margin-bottom:0;margin-left:1.5em}
ul{list-style:disc outside}
ol{list-style:decimal outside}
hr{height:0;border:none;background:none;border-top:1px solid}
table{border-collapse:collapse;border-spacing:0}
table caption{text-align:left}
table.bordered td,table.bordered th,table[border="1"] td,table[border="1"] th{border:1px solid;padding:.5em 1em;vertical-align:top}
input,button,select,textarea,.btn{font:inherit;color:inherit;line-height:normal;font-size:100%;background:none;border:none;padding:0;margin:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;vertical-align:middle}
textarea{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
input::-moz-focus-inner,button::-moz-focus-inner{margin:0;padding:0;border:none;outline:none}
input[type="button"],input[type="submit"],input[type="reset"],select,button,label,a{cursor:pointer}
input,button,select,textarea,.btn{border:1px solid #ccc;background-color:white;padding:2px 2px;margin:0 0 3px}
.clear{display:block;clear:both}
.left{float:left}
.right{float:right}
.hidden{display:none}
.invisible{visibility:hidden}
.text-left{text-align:left}
.text-right{text-align:right}
.text-center{text-align:center}
.text-justify{text-align:justify}
.text-normal{font-style:normal;font-weight:normal;background:none;border:none;color:black;text-decoration:none}
.visually-hidden,.screen-reader{position:absolute!important;overflow:hidden;clip:rect(0px 0px 0px 0px);clip:rect(0px,0px,0px,0px);height:1px;width:1px;margin:-1px 0 0;padding:0;border:0}
.moderate-visually-hidden{position:absolute;top:-9999px;left:-9999px}
.no-flow{overflow:hidden}
.auto-flow{overflow:auto}
.scroll-flow{overflow:scroll}
.x-flow{overflow-x:auto}
.y-flow{overflow-y:auto}
.x-scroll{overflow-x:scroll}
.y-scroll{overflow-y:scroll}
.no-x-scroll{overflow-x:hidden}
.no-y-scroll{overflow-y:hidden}
.full-width{width:100%}
.half-width{width:50%}
.nav,.nav ul,.nav ol,.nav li{margin:0;padding:0;list-style:none}
.nav li{display:inline}
.cf{*zoom:1}
.cf:after{content:"";line-height:0;display:table;clear:both}

/* B1:A by Taufik Nurrohman (http://www.dte.web.id) */
body{background-color:#999;font:normal normal 14px/1.5 "Source Sans Pro",Calibri,Segoe,"Segoe UI",Frutiger,"Frutiger Linotype","DeJavu Sans","Helvetica Neue",Arial,Sans-Serif;color:#333}
a{color:#214067}
a img,.post-thumbnail{padding:4px;background-color:#eee;border:1px solid #ddd}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-family:Oswald,"Arial Narrow","Source Sans Pro",Calibri,Segoe,"Segoe UI",Frutiger,"Frutiger Linotype","DeJavu Sans","Helvetica Neue",Arial,Sans-Serif;color:#BBBBBB}
.widget{margin:0 0 2em}
.sidebar .widget ul,.sidebar .widget ol{margin-top:0}
.sidebar h2{font-size:120%;margin:0 0 .3em}
.popular-posts ul,.popular-posts li{margin:0;padding:0;list-style:none}
.popular-posts li{margin-bottom:.6em}
.popular-posts .item-thumbnail{width:72px;height:72px;float:left;border:4px solid #ddd;-webkit-border-radius:72px;-moz-border-radius:72px;border-radius:72px;overflow:hidden;margin:4px 10px 0 0}
.popular-posts .item-thumbnail img{float:none;display:block;margin:0 0;padding:0 0;border:none}
.popular-posts .item-title{font-weight:bold;font-size:120%}
#outer-wrapper{text-align:left;width:1100px;background-color:#fafafa;margin:0 auto;-webkit-box-shadow:0 0 3px #5F5846;-moz-box-shadow:0 0 3px #5F5846;box-shadow:0 0 3px #5F5846}

#site-header,#site-footer{background-color:#333333;color:white;line-height:normal}
#site-header .inner,#site-footer .inner{padding:15px 20px}
#site-header h1,#site-header p,#site-header .widget{line-height:normal;margin:0}
#site-header h1{font-size:150%;text-transform:uppercase;letter-spacing:5px;color:white}
#site-header a,#site-footer a{color:#97ABC1}
#site-header a:hover,#site-footer a:hover{color:white}
#site-nav,#site-nav ul{background-color:#999;height:40px;color:#213E62;text-transform:uppercase}
#site-nav{border-bottom:2px solid #ddd}
#site-nav li{float:left;position:relative}
#site-nav a{display:block;height:40px;line-height:40px;padding:0 15px;color:inherit;white-space:nowrap;font-family:Oswald,"Arial Narrow","Source Sans Pro",Calibri,Segoe,"Segoe UI",Frutiger,"Frutiger Linotype","DeJavu Sans","Helvetica Neue",Arial,Sans-Serif;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#site-nav a.home-menu,#site-nav a.home-menu:hover{background-color:#999;color:white;padding:0 10px;line-height:45px}
#site-nav a:hover,#site-nav li:hover>a{background-color:#999;text-decoration:none;color:white}
#site-nav li ul{height:auto;position:absolute;z-index:999;top:-99999px;left:-99999px;width:170px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.js #site-nav li ul{top:100%;left:0;display:none}
#site-nav li li{float:none;display:block}
#site-nav li li a{height:30px;line-height:30px;padding:0 10px}
.js #site-nav li li ul{top:0;left:100%}
.no-js #site-nav li:hover>ul{top:100%;left:0}
.no-js #site-nav li li:hover>ul{top:0;left:100%}
#site-nav .search-form{float:right;text-transform:none}
#site-nav .search-form form{margin:0;height:40px;line-height:40px;padding:0 14px}
#site-nav .search-form .text-input{width:150px;border-color:transparent}
#main-wrapper{width:65%}
#sidebar-wrapper{width:31.8%;line-height:normal;font-size:12px}
#sidebar-wrapper h2{background-color:#333;color:white;padding:5px 10px;margin:0 0 10px;border-top:4px solid #31588B}
#main-wrapper .inner,#sidebar-wrapper .inner{padding:0 20px}
input[type="button"],input[type="submit"],input[type="reset"],button,.btn,#site-nav .search-form .submit-button,input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover,button:hover,.btn:hover,#site-nav .search-form .submit-button:hover{display:inline-block;*display:inline;background-color:#31588B;border-color:transparent;color:white;font-weight:bold;padding-left:6px;padding-right:6px;text-decoration:none}
input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover,button:hover,.btn:hover,#site-nav .search-form .submit-button:hover{background-color:#273E5F}

.breadcrumb{border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;height:24px;overflow:hidden;margin:0 0 20px;font-size:86%;font-weight:bold}
.breadcrumb li{float:left;border-right:1px solid #ddd}
.breadcrumb li a,.breadcrumb li span{display:block;height:24px;line-height:24px;padding:0 10px}


.post-title{border-bottom:1px dashed #ddd;padding-bottom:10px}
.index .post-title{font-size:140%;padding:0;margin:0;border:none}
.post-body,.post-footer{margin-top:1.7em}
.index .post-body{margin-top:.5em}
.post-thumbnail{margin:.2em 1em 0 0}
.index .post-thumbnail{width:72px;height:72px;float:left;border:4px solid #ddd;-webkit-border-radius:72px;-moz-border-radius:72px;border-radius:72px;overflow:hidden;margin:4px 10px 0 0}
.index .post-thumbnail img{float:none;display:block;margin:0 0;padding:0 0;border:none}

.box {
  text-align:center;
  -webkit-transition:all .3s linear;
  -moz-transition:all .3s linear;
  -o-transition:all .3s linear;
  transition:all .3s linear;
}

.box2 {
  position:relative;
  z-index:4;
  border-radius:17px;
  font-size:1.8em;
  font-weight:bold;
  background:#eee;
  border:1px solid #ccc;
  float:left;
  line-height:34px;
  height:34px;
  width:34px;
  padding:0;
  text-shadow:1px 1px #ccc;
}

.komentar {
  width:auto;
  min-width:34px;
  max-width:80px;
}

.jam {
  background:#eee url(http://2.bp.blogspot.com/-6f3YMV7Kv-U/UUxBe6vEd9I/AAAAAAAAAFI/kCdm0LdV7Xo/s1600/jam.png) no-repeat 7px 7px;
}

.box a {
  color:#333;
}

a.au:hover {
  color:green;
}

a.fb:hover {
  color:#3b5998;
}

a.tw:hover {
  color:#1bb2e9;
}

a.gp:hover {
  color:#cf4332;
}

span.plus {
  position:relative;
  top:-7px;
  font-weight:normal;
  font-size:13px;
}

span.google {
  position:relative;
  top:-3px;
  font-family:Georgia,serif;
}

.box3 {
  position:relative;
  left:-17px;
  box-shadow:inset 0 0 13px #ddd;
  -moz-box-shadow:inset 0 0 13px #ddd;
  -webkit-box-shadow:inset 0 0 13px #ddd;
  -webkit-transition:margin .6s linear,width .3s linear;
  -moz-transition:margin .6s linear,width .3s linear;
  -o-transition:margin .6s linear,width .3s linear;
  transition:margin .6s linear,width .3s linear;
  float:left;
  background:#fff;
  border-radius:0 17px 17px 0;
  border:1px solid #ccc;
  width:0;
  height:34px;
  line-height:34px;
  overflow:hidden;
  margin:0 8px 0 0;
}

.box3 span {
  margin:0;
}

.box2:hover {
  border:1px solid #aaa;
}

.box:hover .box3 {
  margin:0 -7px 0 0;
  width:100px;
}

.box:hover .box3.panjang {
  margin:0 -7px 0 0;
  width:150px;
}

/* search */
.input-wrapper {
  border:1px solid #B9E8FB;
  width:26px;
  height:26px;
  float:right;
  background-color:white;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
  overflow:hidden;
  position:relative;
}

.input-wrapper input,
.input-wrapper input:focus {
  border:none;
  background:none;
  margin:0 0;
  padding:0 16px;
  display:block;
  width:200px;
  height:26px;
  font:italic bold 12px/26px Arial,Sans-Serif;
  color:#1C86AF;
  outline:none;
}

.input-wrapper.focus {
  background-color:#EAF7FC;
  border-color:#3EBFF0;
}

.input-wrapper .sc {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:white url('') no-repeat 50% 50%;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}

/* threaded komen */
.comments {
  padding:2em;
  margin:0 2%;
  background-color:#2f2f2f;
  border:2px solid #666;
  -webkit-box-shadow:inset 0 0 7px black;
  -moz-box-shadow:inset 0 0 7px black;
  box-shadow:inset 0 0 7px black;
  color:white;
}
.comments .note,em[rel="note"] {
  display:block;
  padding:5px 10px;
  border:1px solid black;
  background-color:#222;
  background-image:-webkit-linear-gradient(#333,#222);
  background-image:-moz-linear-gradient(#333,#222);
  background-image:-ms-linear-gradient(#333,#222);
  background-image:-o-linear-gradient(#333,#222);
  background-image:linear-gradient(#333,#222);
  -webkit-box-shadow:0 0 0 1px #555;
  -moz-box-shadow:0 0 0 1px #555;
  box-shadow:0 0 0 1px #555;
  color:#ccc;
  font:normal normal 11px/normal Tahoma,Verdana,Arial,Sans-Serif;
  text-shadow:0 1px 0 black;
}
.comments .note a,.comments .note code {font-size:100%}
.comments img.incomment,.comments blockquote img.incomment {
  display:block;
  margin:2px auto 0;
}
.comments pre,i[rel="pre"],.comments blockquote,.comments b[rel="quote"] {margin:5px 0}
.comments a {color:#5687B8}
.comments a.allow,i[rel="anchor"] {font-size:97%}
.comments code,i[rel="code"],#respond em {
  color:inherit;
  font:normal normal 12px/1.4 "Courier New",Courier,Monospace;
}
.comments code a,.comments code a:hover,.comments code a:focus {
  color:inherit;
  background:none;
}
.comments i[rel="image"] {
  display:block;
  margin:2px auto;
  width:50px;
  height:50px;
  border:5px solid #222;
  background-color:white;
  font:normal normal 0/0 a;
  color:transparent;
  text-shadow:none;
  overflow:hidden;
  position:relative;
}
.comments iframe.video {
  width:320px;
  max-width:320px;
  height:224px;
  -webkit-box-shadow:0 1px 3px black;
  -moz-box-shadow:0 1px 3px black;
  box-shadow:0 1px 3px black;
  display:block;
  margin:10px auto;
  border:4px solid #444;
  background-position:50% 50%;
}
.comments h4 {
  color:white;
  font-size:116%;
  margin:1.5em 0 1em;
  padding:0;
  letter-spacing:0;
}
.comments .avatar-image-container {
  margin:0 0 3px;
  border:1px solid #3c3c3c;
  padding:4px;
  width:45px;
  height:45px;
  max-width:100%;
  max-height:100%;
  float:none;
  -webkit-box-shadow:0 1px 2px black;
  -moz-box-shadow:0 1px 2px black;
  box-shadow:0 1px 2px black;
  background-color:#666;
  -webkit-background-clip:content-box;
  -moz-background-clip:content-box;
  background-clip:content-box;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}
.comments .avatar-image-container img {
  width:45px;
  height:45px;
  max-width:100%;
  max-height:100%;
  overflow:visible;
  float:none;
}
.comments .avatar-image-container img:hover {opacity:.7}
.comments .button {color:#ebebeb}

.cm_wrap {
  clear:both;
  float:right;
  margin-bottom:4px;
  width:100%;
  position:relative;
}
.cm_head {
  width:58px;
  float:left;
}
.cm_reply a {
  display:block;
  width:auto;
  margin:0 0 1px 3px;
  padding:2px 7px 3px;
  text-transform:none;
  color:white;
  background-color:#527915;
  background-image:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));
  background-image:-moz-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));
  background-image:-ms-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));
  background-image:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));
  background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));
  font:inherit;
  font-size:80%;
  line-height:normal;
  -webkit-box-shadow:0 2px 2px black;
  -moz-box-shadow:0 2px 2px black;
  box-shadow:0 2px 2px black;
  -webkit-border-radius:3px 0 0 3px;
  -moz-border-radius:3px 0 0 3px;
  border-radius:3px 0 0 3px;
  -webkit-transition:all .16s ease-in-out;
  -moz-transition:all .16s ease-in-out;
  -ms-transition:all .16s ease-in-out;
  -o-transition:all .16s ease-in-out;
  transition:all .16s ease-in-out;
}
.cm_reply .item-control {display:block}
.cm_reply a:hover,.cm_reply a:focus,.cm_reply a.clicked {
  color:white;
  margin:0 0 1px -3px;
  padding:2px 10px 3px 7px;
  outline:none;
  text-decoration:none;
}
.cm_reply a:focus,.cm_reply a.clicked {background-color:#890586}
.cm_reply a:active {
  background-image:-webkit-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:-moz-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:-ms-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:-o-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,0));
  outline:none;
}
.cm_entry {
  margin:0 0 0 58px;
  padding:1.26em;
  border:1px solid #3c3c3c;
  background-color:#333;
  -webkit-box-shadow:0 1px 2px black;
  -moz-box-shadow:0 1px 2px black;
  box-shadow:0 1px 2px black;
  overflow:hidden;
  position:relative;
  -webkit-transition:all 1s ease-out;
  -moz-transition:all 1s ease-out;
  -ms-transition:all 1s ease-out;
  -o-transition:all 1s ease-out;
  transition:all 1s ease-out;
}
.cm_entry .author-mark {
  display:block;
  width:0;
  height:0;
  border:12px solid transparent;
  border-color:transparent #900 #900 transparent;
  position:absolute;
  right:0;
  bottom:0;
}
.cm_entry .cm_info,.cm_entry .para {
  border:1px solid #555;
  background-color:#444;
  padding:.5em .8em;
}
.cm_entry .cm_info {margin-bottom:2px}
.cm_entry .para {
  clear:both;
  word-wrap:break-word;
}
.cm_name {
  font-weight:bold;
  font-style:normal;
  float:left;
}
.cm_date {
  font-size:84%;
  font-style:italic;
  line-height:1.8;
  color:#888;
  float:right;
}
.cm_entry .para.deleted-by-js {color:#bbb}
.cm_entry .para.deleted-by-js textarea {
  width:100%;
  height:120px;
  margin:1.7em auto;
}
.cm_pagenavi {
  font-size:10px;
  text-transform:uppercase;
  color:#666;
  font-weight:bold;
}
.cm_pagenavi a {padding:10px}
.cm_pagenavi span {
  color:#888;
  background-color:#3c3c3c;
  padding:4px;
}
#comment-form {
  clear:both;
  margin:3em 0 0;
  padding:1.6em;
  -webkit-box-shadow:0 1px 5px black;
  -moz-box-shadow:0 1px 5px black;
  box-shadow:0 1px 5px black;
  width:auto;
  max-width:100%;
}
#respond p {font-size:96%}
#comment-editor {
  width:100%;
  height:270px;
  background:none;
}
#frame-outer {position:relative}
#cancel-answer {display:none}
.cm_wrap #comment-form {
  margin:4px 0 0;
  border:1px solid #3c3c3c;
  -webkit-box-shadow:0 1px 2px black;
  -moz-box-shadow:0 1px 2px black;
  box-shadow:0 1px 2px black;
}
.cm_wrap #cancel-answer {display:inline}
.cm_wrap #comment-form .heads-up {display:none}
img.emo,input.emo-key {
  position:relative;
  cursor:pointer;
  width:auto;
  vertical-align:middle;
}
input.emo-key {
  background-color:black;
  border:none;
  font-size:12px;
  font-weight:normal;
  color:white;
  margin:0 0 0 5px;
  padding:1px;
}

@media (max-width:1024px){
  .rwd #outer-wrapper{width:98%}
}
@media (max-width:810px){
  .rwd #site-nav,.rwd #site-nav ul{height:auto}
  .rwd #site-nav a.home-menu,.rwd #site-nav a.home-menu:hover{background-color:#333;color:#31588B}
  .rwd #site-nav li{float:none;display:block}
  .rwd #main-wrapper,.rwd #sidebar-wrapper{float:none;display:block;width:auto;margin:20px}
  .rwd #main-wrapper .inner,.rwd #sidebar-wrapper .inner{margin:0;padding:0}
  .rwd #site-nav .search-form{float:none;display:block}
  .rwd #site-nav .search-form .text-input{width:50%}
  .rwd img{max-width:98%;height:auto}
  .rwd .separator.left,.rwd .separator.right{float:none;display:block;text-align:center}
}